<template>
  <div class="menu">
    <div v-for="item in menuList" :key="item.path">
      <!-- 如果没有children -->
      <template v-if="!item.children">
        <el-menu-item v-if="item.meta.menuShow" :index="item.path" @click="jump">
          <!-- <el-icon>
            <component :is="item.meta.icons"></component>
          </el-icon> -->
          <i :class="item.meta.icons"></i>
          <template #title>
            <span>{{ item.meta.title }}</span>
          </template>
        </el-menu-item>
      </template>

      <!-- 如果只有一个孩子 -->
      <template v-if="item.children && item.children.length === 1">
        <el-menu-item :index="item.children[0].path" v-if="item.meta.menuShow" @click="jump">
          <!-- <el-icon>
            <component :is="item.children[0].meta.icons"></component>
          </el-icon> -->
          <i :class="item.children[0].meta.icons"></i>
          <template #title>
            <span>{{ item.children[0].meta.title }}</span>
          </template>
        </el-menu-item>
      </template>
      <!-- 如果有一个以上个孩子 -->
      <el-submenu v-if="item.children && item.children.length > 1" :index="item.path">
        <template #title>
          <i :class="item.meta.icons"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <!-- 自身组件递归 -->
        <Menu :menuList="item.children"></Menu>
      </el-submenu>
    </div>
  </div>
</template>
<script>
import { routes } from '@/router/routes';
export default {
  name: 'Menu',
  props: {
    menuList: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.menuRoutes = routes;
    // console.log('路由菜单', this.menuList);
  },
  methods: {
    jump(vc, path) {
      // console.log(vc.index, path);
      if (this.$route.path === vc.index) {
        return;
      }

      // if (path) {
      //   console.log('当前路由',this.$route.path);
      //   console.log('点击菜单的路由',path);
      //   // if (this.$route.path === path) {
      //   //   return;
      //   // }
      //   // if (this.$route.path !== path) {
      //     console.log('跳转');
      //     // this.$router.push(path);

      //     this.$router.push(path).catch(err => { console.log(err) })
      //   // }
      //   // this.$router.push(path);
      // }
      this.$router.push(vc.index);
    }
  }
};

// const $router = useRouter()
// const jump = (vc: any) => {
//     this.$router.push(vc.index)
// }
</script>
<style lang="scss" scoped>
.menu {
  display: flex;
  flex-direction: column;

  > div {
    height: 56px;
    display: flex;
    width: 100%;
  }
}

:deep .el-menu-item {
  display: flex;
  align-content: center;
  width: 100%;
}

:deep .el-menu-item > .el-tooltip {
  display: flex !important;
  align-items: center;
}
:deep .el-menu-item > i {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep .el-menu-item > span {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep .el-menu-item.is-active {
  color: $themeColor;
  // background-color: ;
}

:deep .el-submenu {
  width: 100%;
}
:deep .el-submenu .el-submenu__title {
  width: 100%;
}

// :deep .el-menu-item:hover {
//   background: red;
// }
</style>
